<template>
  <view>
    <!-- 评论列表 -->
    <view class="h_comment" v-for="(item, index) in commentList" :key="item.id">
      <view class="h-level-1">
        <!-- 用户信息 -->
        <view class="h_info">
          <!-- 用户和头像 -->
          <image
            size="64rpx"
            :src="item.url || defaultUserAvatar"
            class="border-rd-[100%]"
          ></image>
          <view class="flex-1 ml-12rpx">
            <!-- 一级评论 => 文本 -->
            <view class="h_content">
              <view class="name fw-700" :style="{ color: themeColor }">
                {{ item.name }}
              </view>
              <text class="break-all">
                {{ formatContent(item.contentText || item.content) }}
              </text>
              <view
                v-if="item.picture && item.picture.length > 0"
                class="images h-400rpx imgList"
                :class="[
                  item.picture.length > 3
                    ? 'grid-cols-[1fr_1fr_1fr]'
                    : item.picture.length === 2
                      ? 'grid-cols-[1fr_1fr]'
                      : 'grid-cols-1fr',
                ]"
              >
                <view v-for="(e, i) in item.picture" :key="i">
                  <wd-img :src="e" :enable-preview="true" class="w-full h-full" />
                </view>
              </view>
            </view>

            <!-- 一级评论 => 日期、回复 -->
            <view class="h_date">
              <view class="flex items-center text-[#999] text-26rpx">
                <text>{{ timestampFormat(item.date) || '刚刚' }}</text>
                <!-- <text class="mx-12rpx">{{ item.address || '' }}</text> -->
              </view>
              <view class="like" :style="{ color: item.isLike ? themeColor : '#9a9a9a' }">
                <!-- 点赞 -->
                <view class="num" :style="{ color: item.isLike ? themeColor : '#9a9a9a' }">
                  {{ item.likeNum }}
                  <wd-img
                    :src="`/static/images/comment/like-${item.isLike}.png`"
                    width="30rpx"
                    height="30rpx"
                    mode="scaleToFill"
                    @click.stop="getLike(index, undefined, item)"
                  />
                  <!-- <wd-icon
                    v-if="!item.isLike"
                    name="thumb-up"
                    size="36rpx"
                    color="#9a9a9a"
                    @click.stop="getLike(index, undefined, item)"
                  ></wd-icon>
                  <wd-icon
                    v-if="item.isLike"
                    name="thumb-up"
                    color="#3670F7"
                    size="36rpx"
                    @click.stop="getLike(index, undefined, item)"
                  ></wd-icon> -->
                </view>
                <!-- 评论 -->
                <view>
                  <span
                    @tap="showRevertPop(index, item, null, null)"
                    class="text-30rpx fw-700 text-[#3d3d3d]"
                  >
                    <!-- <uni-icons
                      type="chat"
                      size="36rpx"
                      style="margin-right: 2px; color: gray"
                    ></uni-icons> -->
                    <wd-img
                      :src="`/static/images/comment/comment.png`"
                      width="30rpx"
                      height="30rpx"
                      mode="scaleToFill"
                    />
                  </span>
                </view>
              </view>
              <!-- <view
                v-if="item.isMyComment"
                class="h_remove text-26rpx"
                :style="{ color: themeColor }"
                @tap="removeRevertModal(index, item, null, null)"
              >
                删除
              </view> -->
            </view>
          </view>
        </view>

        <!-- 二级评论 -->
        <view v-if="item.replyList && item.replyList.length > 0" class="h_revert_list">
          <!-- 二级评论 => 列表 -->
          <view
            class="item_s mt-20rpx"
            v-for="(item_s, j) in item.replyList.slice(0, item.replyListLength)"
            :key="item_s.index"
          >
            <!-- 头像 -->
            <image
              size="40rpx"
              :src="item_s.url || defaultUserAvatar"
              class="border-rd-[100%]"
            ></image>
            <view class="flex-1 ml-12rpx">
              <view class="h_content">
                <!-- 姓名 -->
                <view class="fw-700 mb-12rpx">
                  {{ item_s.name }}
                </view>
                <!-- 回复内容 -->
                <text v-if="item_s.to_user_name || item_s.toUserName">
                  回复 {{ item_s.to_user_name || item.toUserName }}：
                </text>
                <text class="text-[#333] text-26rpx break-all">
                  {{ formatContent(item_s.contentStr) }}
                </text>
                <!-- 图片 -->
                <view
                  v-if="item_s.picture && item_s.picture.length > 0"
                  class="images h-400rpx imgList"
                  :class="[
                    item_s.picture.length > 3
                      ? 'grid-cols-[1fr_1fr_1fr]'
                      : item_s.picture.length === 2
                        ? 'grid-cols-[1fr_1fr]'
                        : 'grid-cols-1fr',
                  ]"
                >
                  <view v-for="(e, i) in item_s.picture" :key="i">
                    <wd-img :src="e" :enable-preview="true" class="w-full h-full" />
                  </view>
                </view>
              </view>
              <!-- 发布日期 -->
              <view class="date">
                <view class="flex items-center text-[#999] text-26rpx">
                  <text>{{ timestampFormat(item_s.date) }}</text>
                  <!-- <text class="mx-12rpx">{{ item_s.address || '' }}</text> -->
                </view>
                <!-- 点赞 -->
                <view
                  class="like flex gap-12rpx items-center"
                  :style="{ color: item_s.isLike ? themeColor : '#9a9a9a' }"
                >
                  <view class="num" :style="{ color: item_s.isLike ? themeColor : '#9a9a9a' }">
                    {{ item_s.likeNum }}
                    <wd-img
                      :src="`/static/images/comment/like-${item_s.isLike}.png`"
                      width="30rpx"
                      height="30rpx"
                      mode="scaleToFill"
                      @click="getLike(index, j, item_s)"
                    />
                    <!-- <wd-icon
                      v-if="!item_s.isLike"
                      name="thumb-up"
                      size="30rpx"
                      color="#9a9a9a"
                      @click="getLike(index, j, item_s)"
                    ></wd-icon>
                    <wd-icon
                      v-if="item_s.isLike"
                      name="thumb-up"
                      color="#3670F7"
                      size="30rpx"
                      @click="getLike(index, j, item_s)"
                    ></wd-icon> -->
                  </view>
                  <!-- 评论 -->
                  <view>
                    <span
                      @tap="showRevertPop(index, item, j, item_s)"
                      class="text-30rpx fw-700 text-[#3d3d3d]"
                    >
                      <!-- <uni-icons type="chat" size="36rpx" style="color: gray"></uni-icons> -->
                      <wd-img
                        :src="`/static/images/comment/comment.png`"
                        width="30rpx"
                        height="30rpx"
                        mode="scaleToFill"
                      />
                    </span>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- loading -->
          <view v-if="item.isLoading" class="pt-60rpx">
            <wd-loading color="#3670F7" size="30rpx" />
            <text class="text-[#3670F7] ml-8rpx">加载中</text>
          </view>

          <!-- 展开更多二级评论 -->
          <view
            v-if="item.replyList.length > 2 && !item.showAllReplyYn"
            @tap="showAllReply(index, item)"
            class="reply-more"
          >
            展开{{ item.replyList.length - 2 }}条回复
          </view>

          <!-- 收起二级评论 -->
          <view
            v-if="item.showAllReplyYn"
            @tap="closeToAllReply(index)"
            class="reply-more flex-row-center"
          >
            收起回复
          </view>
        </view>
      </view>
    </view>

    <view v-if="commentList.length === 0" class="empty-state flex-center flex-col">
      <wd-status-tip :image="emptyImage" tip="暂无动态" />
    </view>

    <!-- 发表评论 -->
    <view class="bottom-input">
      <wd-input
        :placeholder="userPlaceholder"
        :use-prefix-slot="true"
        class="flex-1 border-rd-12rpx"
        @tap="showRevertPop(null, null, null, null)"
      >
        <template #prefix>
          <wd-img :src="editCommentPng" size="24rpx" />
        </template>
      </wd-input>
    </view>

    <!-- 评论弹框 -->
    <uni-popup ref="revertRef" type="bottom" class="comment-pop" @change="onChangePop">
      <view class="comment-pop-content">
        <wd-input
          :placeholder="placeholder"
          :focus="comtIptFocusStatus"
          v-model="inputVal"
          @change="onChangeInput"
        ></wd-input>
        <view class="send" :style="{ background: '#3670F7' }" @click="sendComment">发送</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getRowData, getUserAddress } from '@/service/edu/comment'
/* 引入 图片 - 暂无数据 */
import emptyImage from '@/static/images/icons/empty.png'
/* 引入 图片 - 评论默认头像 */
import defaultUserAvatar from '@/static/images/comment/default_user.png'
/* 引入 图片 - 写评论 */
import editCommentPng from '@/static/images/comment/edit-comment.png'

/**
 * 评论组件
 * @props list 评论列表
 * @props modelValue 评论 输入框的value ==> 可使用 v-model 语法糖
 * @props themeColor 主题色
 * @props keyNames 指定keyName 详见文档
 * @event getLike 点赞事件
 * @event sendComment 发送评论事件
 * @event getMore 获取更多评论事件
 * @event remove 删除评论事件
 *
 * @export close 发送评论成功可调用 【close方法】 关闭评论弹框
 *
 * @example <h-comment-box :list="评论列表" v-model="输入框的值" @getLike="点赞回调" @sendComment="发送评论回调" ref="hCommentRef"/>
 */

/**
 * 定义props
 * @param list 评论列表
 * @param modelValue 评论 输入框的value
 * @param themeColor 主题色
 * @param keyNames 指定keyName
 */
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  avatar: {
    type: String,
  },
  commentId: {
    type: String,
  },
  modelValue: {
    type: String,
    default: '',
  },
  themeColor: {
    type: String,
    default: '#3D3D3D',
  },
  keyNames: {
    type: Object,
    default: () => {
      return {
        // 一级评论相关
        id: 'id', // 评论id
        user_id: 'userId', // 用户id
        user_name: 'name', // 用户名
        user_ip: 'address', // 用户IP
        user_avatar: 'headshot', // 用户头像
        user_content: 'content', // 用户评论内容
        user_date: 'updateTime', // 用户评论时间
        user_is_like: 'isLike', // 用户是否点赞
        user_like_num: 'likeCount', // 用户点赞数
        isLoading: 'isLoading', // 是否显示加载中
        allReply: 'allReply', // 评论总数
        isMyComment: 'isMyComment', // 是否是自己的评论
        // 二级评论相关
        user_reply_list: 'children', // 回复列表
        user_reply_id: 'id', // 回复人id
        user_reply_name: 'name', // 回复人名字
        user_reply_avatar: 'headshot', // 回复人头像
        user_reply_content: 'content', // 回复 内容
        user_reply_date: 'updateTime', // 回复 时间
        user_reply_is_like: 'isLike', // 回复人是否点赞
        user_reply_like_num: 'likeCount', // 回复人点赞数
        pid: 'pid',
        user_isMyComment: 'isMyComment', // 是否是自己的评论
        to_user_name: 'toUserName', // 被回复人名字
        to_user_id: 'to_user_id', // 被回复人id
      }
    },
  },
})

const state = reactive({
  longitude: '',
  latitude: '',
})

// 定义主题色
const themeColor = ref('#3D3D3D')

// 输入框的placeholder
const placeholder = ref('请输入内容')
const userPlaceholder = ref('写评论')

// 输入框的value
const inputVal = ref('')

const revertRef = ref(null) // uni_popup 弹框实例
const comtIptFocusStatus = ref(false) // 评论输入框聚焦状态

const isComtIndex = ref(0) // 回复：当前点击的一级评论索引
const isComtRow = ref({}) // 回复：点击的 一级评论信息
const isComtIndex_s = ref(0) // 回复：点击的 二级评论索引
const isComtRow_s = ref({}) // 回复：点击的 二级评论信息

/**
 * 弹框change事件
 */
function onChangePop(e) {
  comtIptFocusStatus.value = e.show
}

/**
 * 发送评论
 */
async function sendComment() {
  /* 获取地理定位通过经纬度 */
  const res = await getUserAddress({
    longitude: state.longitude,
    latitude: state.latitude,
  })
  console.log('获取地理定位通过经纬度', res)
  const address = res ? res.regeocode.addressComponent.province : ''
  /**
   * @argument index 一级评论索引
   * @argument row 一级评论信息
   * @argument index_s 二级评论索引
   * @argument row_s 二级评论信息
   * @callback ()=>{} 发送评论接口成功之后 调用sendComment的第二个形参 该形参为方法，更新组件内的评论列表
   */
  emit(
    'sendComment',
    {
      index: isComtIndex.value,
      row: isComtRow.value,
      index_s: isComtIndex_s.value,
      row_s: isComtRow_s.value,
      contentStr: inputVal.value,
      // address: Array.isArray(address) ? '' : address || '',
    },
    async (data) => {
      console.log('[ placeholder.value ] 🌸>', placeholder.value)
      if (placeholder.value !== '请输入内容') {
        commentList.value[isComtIndex.value].replyList.unshift({ ...data, isMyComment: true })
      } else {
        commentList.value.unshift({ ...data, isMyComment: true })
      }
      close()
      await getDetail()
    },
  )
}

/**
 * 定义事件
 */
const emit = defineEmits(['getLike', 'sendComment', 'getMore', 'remove', 'update:modelValue'])
defineExpose({
  close,
})

// 评论列表 ==》 根据传入的commentList和传入的keyNames生成新的评论列表
const commentList = ref([])

async function getDetail() {
  const res = await getRowData(props.commentId)
  if (res?.code === 200) {
    const { data = {} } = res
    if (data.commentList.length > 0) {
      commentList.value = data.commentList
    } else {
      commentList.value = []
    }
    // console.log(commentList.value, 'commentList.value-1')
    commentList.value = commentList.value.map((item) => {
      return {
        id: item[props.keyNames.id],
        name: item[props.keyNames.user_name],
        address: item[props.keyNames.user_ip],
        url: item[props.keyNames.user_avatar],
        contentText: item[props.keyNames.user_content] || item.content,
        date: item[props.keyNames.user_date],
        isLike: item[props.keyNames.user_is_like],
        likeNum: item[props.keyNames.user_like_num] || 0,
        isLoading: item[props.keyNames.isLoading],
        allReply: item[props.keyNames.allReply],
        isMyComment: item[props.keyNames.isMyComment],
        picture: formatPicture(item.content),
        replyListLength: 2,
        replyList:
          (item[props.keyNames.user_reply_list] &&
            item[props.keyNames.user_reply_list].map((item_s) => {
              return {
                id: item_s[props.keyNames.user_reply_id],
                pid: item_s[props.keyNames.pid],
                name: item_s[props.keyNames.user_reply_name],
                address: item_s[props.keyNames.user_ip],
                url: item_s[props.keyNames.user_reply_avatar],
                contentStr: item_s[props.keyNames.user_reply_content],
                picture: formatPicture(item_s.content),
                date: item_s[props.keyNames.user_reply_date],
                isLike: item_s[props.keyNames.user_reply_is_like],
                likeNum: item_s[props.keyNames.user_reply_like_num] || 0,
                to_user_name: item_s.to_user_name || item_s.toUserName,
                to_user_id: item_s[props.keyNames.to_user_id],
                user_isMyComment: item_s[props.keyNames.user_isMyComment],
              }
            })) ||
          [],
      }
    })
    // console.log(commentList.value, 'list')
  }
}

uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    state.longitude = `${res.longitude}` || ''
    state.latitude = `${res.latitude}` || ''
    // console.log('当前位置的经度：' + res.longitude)
    // console.log('当前位置的纬度：' + res.latitude)
  },
})

onLoad(async () => {
  await getDetail()
})

/* 格式化回复内容 */
function formatContent(str) {
  if (str.includes('u-img[')) {
    return str.split('u-img[')[0]
  }
  return str
}
/* 格式化内容中的图片 */
function formatPicture(str) {
  // console.log(str, 'str')
  // 使用正则表达式提取 URL
  const regex = /u-img\[(.*?)\]/
  const match = str.match(regex)

  if (match && match[1]) {
    // 将提取的字符串按逗号分割成数组
    const urlArray = match[1].split(',')
    // console.log(urlArray)
    return urlArray
  } else {
    // console.log('没有找到 URL 数组')
    return []
  }
}
function previewImg(urls) {
  if (urls) {
    uni.previewImage({
      urls,
      longPressActions: {
        itemList: ['保存图片'],
      },
    })
  }
}

/**
 * 回复评论弹框
 * @param index  一级评论索引
 * @param row   一级评论信息
 * @param j  二级评论索引
 * @param row_s 二级评论信息
 */
function showRevertPop(index, row, j, row_s) {
  console.log('[ index, row, j, row_s ] 🌸>', index, row, j, row_s)
  if (!index && !row && !j && !row_s) {
    console.log('发表的1🐔评论')
    openPop()
    placeholder.value = `请输入内容`
    isComtIndex.value = null
    isComtRow.value = null
    isComtIndex_s.value = null
    isComtRow_s.value = null
    return
  }
  isComtIndex.value = index !== null ? index : null // 保存当前评论,发送评论时使用
  if (row !== null) {
    isComtRow.value = {
      // 保存当前评论,发送评论时使用
      id: row.id,
      name: row.name,
      url: row.url,
      contentText: row.contentText,
      date: row.date,
      isLike: row.isLike,
      likeNum: row.likeNum,
      allReply: row.allReply,
      isMyComment: row.isMyComment,
    }
  } else {
    isComtRow.value = null
  }
  isComtIndex_s.value = j !== null ? j : null // 保存当前评论,发送评论时使用
  if (row_s !== null) {
    isComtRow_s.value = {
      id: row_s.id,
      pid: row_s.pid,
      name: row_s.name,
      url: row_s.url,
      contentStr: row_s.contentStr,
      date: row_s.date,
      isLike: row_s.isLike,
      likeNum: row_s.likeNum,
      user_isMyComment: row_s.user_isMyComment,
    }
  } else {
    isComtRow_s.value = null
  }
  placeholder.value = `回复 @${j !== null ? row_s.name : row.name}`
  openPop()
}

/**
 * 删除评论
 * @param index  一级评论索引
 * @param row   一级评论信息
 * @param j  二级评论索引
 * @param row_s 二级评论信息
 */
function removeRevertModal(index, row, j, row_s) {
  uni.showModal({
    title: '提示',
    content: j === null ? '确定删除该评论吗？' : '确定删除该回复吗？',
    success: (res) => {
      if (res.confirm) {
        emit(
          'remove',
          {
            index,
            row,
            j,
            row_s,
          },
          () => {
            if (j !== null) {
              commentList.value[index].replyList.splice(j, 1)
              commentList.value[index].allReply--
            } else {
              commentList.value.splice(index, 1)
            }
          },
        )
      }
    },
  })
}

/**
 * 打开评论弹框
 */
function openPop() {
  revertRef.value.open()
}

/**
 * 关闭评论弹框
 * @param msg 提示信息 不传则不提示
 */
function close(msg) {
  revertRef.value.close()
  inputVal.value = ''
  if (msg) uni.showToast({ title: msg, icon: 'none' })
}

/**
 * 收起回复
 */
function closeToAllReply(index) {
  commentList.value[index].replyListLength = 2
  commentList.value[index].showAllReplyYn = false
}

/**
 * 展开更多评论
 * @param index 一级评论索引
 */
function showAllReply(index, row) {
  commentList.value[index].isLoading = true // 显示加载中
  commentList.value[index].showAllReplyYn = true // 显示加载中
  commentList.value[index].replyListLength = row.length
  commentList.value[index].isLoading = false // 显示加载中
  // emit('getMore', { index, row }, (data) => {
  //   let newData = null

  //   if (Array.isArray(data) && data.length) {
  //     newData = data.map((item) => {
  //       return {
  //         id: item[props.keyNames.user_reply_id],
  //         pid: item[props.keyNames.pid],
  //         name: item[props.keyNames.user_reply_name],
  //         url: item[props.keyNames.user_reply_avatar],
  //         contentStr: item[props.keyNames.user_reply_content],
  //         date: item[props.keyNames.user_reply_date],
  //         isLike: item[props.keyNames.user_reply_is_like],
  //         likeNum: item[props.keyNames.user_reply_like_num],
  //         to_user_id: item[props.keyNames.to_user_id],
  //         to_user_name: item[props.keyNames.to_user_name],
  //         user_isMyComment: item[props.keyNames.user_isMyComment],
  //       }
  //     })

  //     commentList.value[index].replyList.push(...newData)
  //   } else {
  //     newData = {
  //       id: item[props.keyNames.user_reply_id],
  //       pid: item[props.keyNames.pid],
  //       name: item[props.keyNames.user_reply_name],
  //       url: item[props.keyNames.user_reply_avatar],
  //       contentStr: item[props.keyNames.user_reply_content],
  //       date: item[props.keyNames.user_reply_date],
  //       isLike: item[props.keyNames.user_reply_is_like],
  //       likeNum: item[props.keyNames.user_reply_like_num],
  //       to_user_id: item[props.keyNames.to_user_id],
  //       to_user_name: item[props.keyNames.to_user_name],
  //       user_isMyComment: item[props.keyNames.user_isMyComment],
  //     }

  //     commentList.value[index].replyList.push(newData)
  //   }

  //   commentList.value[index].isLoading = false // 关闭加载中
  // })
}

/**
 * 点赞
 * @param index 一级评论索引
 * @param j 二级评论索引
 */
function getLike(index, j, rows) {
  /**
   * index 一级评论索引
   * j 二级评论索引
   * ()=>{} 点在接口成功之后 调用getLike的第二个形参 该形参为方法，更新组件内的点赞样式
   */
  emit('getLike', { index, j, rows }, () => {
    if (j !== undefined) {
      commentList.value[index].replyList[j].isLike = !commentList.value[index].replyList[j].isLike
      if (commentList.value[index].replyList[j].isLike == true) {
        commentList.value[index].replyList[j].likeNum++
      } else {
        commentList.value[index].replyList[j].likeNum--
      }
    } else {
      commentList.value[index].isLike = !commentList.value[index].isLike
      if (commentList.value[index].isLike == true) {
        commentList.value[index].likeNum++
      } else {
        commentList.value[index].likeNum--
      }
    }
  })
}

/**
 * 输入框内容改变 => 更新v-model
 */
function onChangeInput(e) {
  emit('update:modelValue', e)
}

/* 转换相对时间 */
function timestampFormat(dateStr) {
  // console.log('[ dateStrdateStrdateStr ] 🌸>', dateStr)
  const timestamp = new Date(dateStr).getTime() / 1000
  if (!timestamp) return '刚刚'
  function zeroize(num) {
    return (String(num).length == 1 ? '0' : '') + num
  }

  var curTimestamp = parseInt(new Date().getTime() / 1000) //当前时间戳
  var timestampDiff = curTimestamp - timestamp // 参数时间戳与当前时间戳相差秒数

  var curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
  var tmDate = new Date(timestamp * 1000) // 参数时间戳转换成的日期对象

  var Y = tmDate.getFullYear(),
    m = tmDate.getMonth() + 1,
    d = tmDate.getDate()
  var H = tmDate.getHours(),
    i = tmDate.getMinutes(),
    s = tmDate.getSeconds()

  if (timestampDiff < 60) {
    // 一分钟以内
    return '刚刚'
  } else if (timestampDiff < 3600) {
    // 一小时前之内
    return Math.floor(timestampDiff / 60) + '分钟前'
  } else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
    return '今天' + zeroize(H) + ':' + zeroize(i)
  } else {
    var newDate = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
    if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
      return '昨天' + zeroize(H) + ':' + zeroize(i)
    } else if (curDate.getFullYear() == Y) {
      return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
    } else {
      return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
    }
  }
}
</script>

<style lang="scss" scoped>
.h_comment {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  margin: 20rpx 0;

  .h_left {
    image {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background-color: #f2f2f2;
    }
  }

  .h-level-1 {
    flex: 1;
    font-size: 30rpx;
    background-color: #f7f7f7;
    padding: 20rpx;

    .h_info {
      display: flex;

      .like {
        display: flex;
        align-items: center;
        font-size: 26rpx;

        .num {
          margin-right: 12rpx;
        }
      }
    }

    .h_content {
      color: #3d3d3d;
      font-size: 26rpx;
      margin-bottom: 10rpx;
    }

    .h_date {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #9a9a9a;

      .h_revert {
        margin-left: 10rpx;
      }

      .h_remove {
        color: #868686;
        margin-left: 20rpx;
      }
    }

    .h_revert_list {
      margin-left: 64rpx;
      padding: 20rpx 0 20rpx 12rpx;

      .item_s {
        display: flex;

        .user-info {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .username {
            flex: 1;
            font-size: 24rpx;
            color: #999999;
            margin-left: 10rpx;

            .left-name {
              margin-right: 10rpx;
            }
          }

          .like {
            display: flex;
            align-items: center;
            color: #9a9a9a;
            font-size: 26rpx;

            .num {
              margin-right: 4rpx;
              color: #9a9a9a;
            }
          }
        }

        .text {
          padding: 8rpx 0;
        }

        .date {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: #9a9a9a;

          .revert {
            margin-left: 10rpx;
          }

          .h_remove {
            color: #868686;
            margin-left: 20rpx;
          }
        }
      }

      .reply-more {
        width: 100%;
        padding-top: 20rpx;
        display: flex;
        color: #3770f8;
        align-items: center;
        font-size: 24rpx;
        padding-bottom: 20rpx;
        font-weight: 700;

        .left-line {
          width: 50rpx;
          height: 2rpx;
          background-color: #eee;
          margin-right: 10rpx;
        }

        .more {
          margin-left: 6rpx;
        }
      }
    }
  }
}

::v-deep .vue-ref {
  padding-bottom: 0 !important;
}

.comment-pop-content {
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;

  :deep(.wd-input) {
    width: 70%;
    height: 50rpx;
    border: solid 1rpx #e8e8e8;
    border-radius: 50rpx;
    padding: 0 20rpx;

    .wd-input__body,
    .wd-input__value,
    .wd-input__inner {
      height: 100% !important;
    }
  }

  .wd-input::after {
    display: none;
  }

  .send {
    width: 120rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 60rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #ffffff;
    margin-left: 18rpx;
  }
}

.p-t-20 {
  padding-top: 20rpx;
}

.flex-row-center {
  justify-content: center;
}

:deep(.wd-input) {
  background: #efefef;
  padding: 0 20rpx;
}

:deep(.wd-input::after) {
  display: none;
}

.imgList {
  display: grid;
  gap: 10rpx;
  margin: 20rpx 0;
}

:deep(.avatar),
:deep(.avatar .wd-img__image),
:deep(.avatar .wd-img__image div) {
  border-radius: 100% !important;
}

.empty-state {
  :deep(.wd-img) {
    margin-top: 200rpx;
  }
}

.bottom-input {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  background: #f6f6f6;

  :deep(.wd-input) {
    background-color: #fff;
  }
}
</style>
